<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="table.css">
    <title>表格</title>
</head>

<body>
    <!-- 使用 table 标签定义一个表格。每个表格的行由 tr(table row) 标签定义，每行分成若干由 td(table data) 标签定义的单元格，也可以称为数据，即 td 标签元素的值中即为单元格数据 -->
    <!-- 一个表格中，就是有若干个的 td 组成的，td 是表格的最小数据单元。 -->
    <h4>一行一列</h4>
    <!-- 通过 border 属性设置表格的边框 -->
    <table border="1">
        <!-- 第一行 -->
        <tr>
            <!-- 第一列 -->
            <td>第一行第一列</td>
        </tr>
    </table>

    <h4>一行三列:</h4>
    <table border="1">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>

    <h4>两行三列:</h4>
    <table border="1">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>

    <h4>表头</h4>
    <table border="1">
        <!-- 使用 th 标签定义表头，表头的样式更像标题 -->
        <tr>
            <th>日期</th>
            <th>存款</th>
        </tr>
        <tr>
            <td>1月</td>
            <td>1000</td>
        </tr>
    </table>

    <h4>结构化的表格</h4>
    <!-- 我们通过 thead、tfoot、tbody 将表格定义得更加结构化。这种结构化可以让我们统一设计样式 -->
    <table border="1">
        <!-- thead 标签定义表格的表头 -->
        <thead>
            <tr>
                <th>日期</th>
                <th>存款</th>
            </tr>
        </thead>
        <!-- tbody 标签定义表格的主体 -->
        <tbody>
            <tr>
                <td>1月</td>
                <td>1000</td>
            </tr>
        </tbody>
        <!-- tfoot 标签定义表格的页脚 -->
        <tfoot>
            <tr>
                <td>2月</td>
                <td>2000</td>
            </tr>
        </tfoot>
    </table>

    <!-- 通过 JS 生成表格中的数据 -->
    <h4>通过 JS 代码生成表格中的数据</h4>
    <table border="1" id="js">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="person"></tbody>
    </table>

</body>

<script src="table.js"></script>

</html>